<!--
/**
 * @intro: 左边导航菜单.
 */
-->
<template>
  <el-aside width="200px" class="default-layout-left-menu">
    <el-container class="height_100" direction="vertical">
      <router-link tag="div" :to="homePage" class="logo-view align_center width_100 pointer">
        <img src="./images/logo.jpg" style="height:44px;border-radius:4px;margin-right:4px;"/>井亭天地生活广场
      </router-link>
      <el-scrollbar class="flex__item" wrap-style="overflow-x: hidden;">
        <el-menu
          class="menu-warp"
          :default-active="getDefaultActive"
          :router="true"
          unique-opened
          background-color="#344058"
          text-color="#c2d7e6"
          active-text-color="#fff">
          <template v-for="(item, index) in menu">
            <!--展开菜单-->
            <el-submenu
              :key="index"
              v-if="item.ChildNodes && item.ChildNodes.length"
              :index="`menu_${index}`">
              <template slot="title">
                <i class="menu__icon fa" :class="item.Node.icon" v-if="item.Node.icon"/>
                <span class="menu__label" v-text="item.Node.MenuName"/>
              </template>
              <el-menu-item
                v-for="(sub_item, sub_index) in item.ChildNodes"
                :key="`sub_menu_${sub_index}`"
                :index="sub_item.Node.MenuUrl"
                :route="{path: sub_item.Node.MenuUrl}">
                <i class="menu__icon fa" :class="sub_item.Node.icon" v-if="sub_item.Node.icon"/>
                <span class="menu__label" v-text="sub_item.Node.MenuName"/>
              </el-menu-item>
            </el-submenu>
            <!--顶级菜单-->
            <el-menu-item
              v-else
              :key="index"
              :index="item.Node.MenuUrl"
              :route="{path: item.Node.MenuUrl}">
              <template slot="title">
                <i class="menu__icon fa" :class="fa-bar-chart-o" v-if="item.icon"/>
                <span class="menu__label" v-text="item.Node.MenuName"/>
              </template>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-container>
  </el-aside>
</template>
<script type="text/javascript">
import {homePage} from 'src/common/setting'
import {Home} from 'src/router/auto-routes'

export default {
  data () {
    return {
      homePage,
      menu: [
      //   {
      //   label: '主页',
      //   icon: 'fa-home',
      //   child: [{
      //     label: '主页1',
      //     icon: 'fa-home',
      //     path: Home.path
      //   }]
      // },
      //{
      //  label: '活动管理',
      //  path: '/activity/list',
      //  icon: 'fa-table',
      //  child: [{
      //    label: '商场活动管理',
      //    path: '/activity/list'
      //  },{
      //    label: '店铺活动管理',
      //    path: '/shopActivity/list'
      //  }]
      //}, {
      //  label: '积分管理',
      //  path: '/integral/list',
      //  icon: 'fa-bar-chart-o',
      //  child: [{
      //    label: '积分核算',
      //    path: '/integral/list'
      //  }]
      //}, {
      //  label: '系统设置',
      //  path: '/systemSetting/integralTransfor',
      //  icon: 'fa-bar-chart-o',
      //  child: [{
      //    label: '基础设置',
      //    path: '/systemSetting/integralTransfor'
      //  }]
      //}, {
      //  label: '用户管理',
      //  path: '/user/list',
      //  icon: 'fa-bar-chart-o',
      //  child: [{
      //    label: '用户列表',
      //    path: '/user/list'
      //  }]
      //}
      ]
    }
  },
  methods: {
    init(){
      this.$api.system.menus().then((rs) => {
        console.log(rs.Data);
        this.menu = rs.Data;
      }).catch((res) =>{});
    },
  },
  computed: {
    getDefaultActive () {
      const {meta, path} = this.$route;
      return meta.active || path;
    }
  },
  created() {
    this.init();
  }
}
</script>
<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .default-layout-left-menu {
    background-color: #344058;

    .logo-view {
      margin: 5px auto;
      line-height: 44px;
      color:#fff;
    }

    .menu-warp {
      border: none;

      .menu__label, .menu__icon {
        color: #fff;
      }

      .menu__icon {
        width: 20px;
        height: 20px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: normal;
      }

      .el-submenu {
        .el-menu-item {
          background-color: #252d3e !important;
        }
      }

      .el-menu-item {
        &.is-active {
          background-color: #1e9fff !important;
        }
      }
    }
  }
</style>
